Codes

Updated at 2020.11.01 Updated at 2020.10.04

Intro

블레이져에서 웹의 레이아웃을 컨트롤하는 방법은 상당히 직관적이고 쉽다. 앞으로는 콘텐츠에만 신경을 쓰라는 것 같다. 참고 사이트: Blazor University - Layouts

Files and Formats

파일 내용 및 형식

• Layout Razor 파일은 LayoutComponentBase class로부터 상속 받아야 함 (@inherits LayoutComponentBase)
• 내용이 나타나야할 위치에 @Body를 놓으면 됨 (Body는 LayoutComponentBase Class의 Property임)

@inherits LayoutComponentBase
<div class="main">
<header>
    <h1>This is the header</h1>
</header>
<div class="content">
    @Body
</div>
<footer>
    This is the footer
</footer>
</div>

• wwwroot\index.html 페이지의 <app> 태그 요소(Tag Element) 부분에 Layout 파일의 내용이 나타남

Default Layout file

디폴트 레이아웃 파일 (MainLayout.razor)

• 기본적으로 만들어진 Layout는 /Shared/MainLayout.razor 파일임
• 각각의 웹페이지 파일(Components, *.razor) 에 명시적으로 Layout을 지정하지 않으면 MainLayout이 적용됨
• 명시적으로 Layout을 지정하는 방법은 한 줄짜리 코드를 추가하면 됨: @layout MainLayout

How to assign default layout in each folder

각 폴더별로 기본 Layout를 지정하는 방법

1. /Shared 폴더내에 원하는 내용의 Layout 파일을 만듦 (여기서는 AdminLayout.razor 라고 하자). 만드는 방법은 위의 예시 참고하면 됨.

2. 예를 들어 Pages폴더 아래 Admin폴더를 만들고 그 폴더 내에 _Imports.razor 파일을 만들고 하기와 같은 코드를 추가하면 됨. @layout AdminLayout

3. 위와 같이 하면 Admin폴더 내의 모든 razor파일에 AdminLayout.razor Layout이 다 적용됨

Making Nested Layout

Layout 파일에 Layout을 포함시키면 Layout안에 또 다른 Layout을 지정할 수 있다. AdminLayout.razor를 하기와 같이 수정하면 MainLayout 속에 AdminLayout이 포함되어 나타난다.

@inherits LayoutComponentBase
@layout MainLayout

<h1>Admin</h1>
@Body

Most Popular #3

Recent #3